import React, { useEffect, useState } from 'react';
import { Button, Modal, ModalProps, Progress } from 'antd';
import ModalsFooter from './ModalsFooter';
import { SvgIcon } from '../icon';

interface Props extends ModalProps {
  onOk?: () => void;
  onCancel?: () => void;
  onFailInfo?: () => void;
  onReset?: () => void;
  onAllCancel?: () => void;
  children?: React.ReactNode;
  okText?: string | React.ReactNode;
  cancelText?: string | React.ReactNode;
  footerCancelHidden?: boolean;
  footerAllCancelHidden?: boolean;
  footerOkHidden?: boolean;
  footerCancelDisabled?: boolean;
  footerOkDisabled?: boolean;
  confirmLoading?: boolean; // 添加此类型
  cancelLoading?: boolean;
  title?: React.ReactNode;
  maskClosable?: boolean;
  headerHeight?: number;
  footerHeight?: number;
  footer?: null | React.ReactNode;
  line?: boolean;
  isImporting?: boolean;
  importingInfo?: ImportingInfo;
}

interface ImportingInfo {
  fail: number;
  success: number;
  detail: {
    desc: string;
    error: string;
    method: string;
    path: string;
  }[];
}


const TipsModals = ({
  onOk,
  onCancel,
  onFailInfo,
  onReset,
  onAllCancel,
  children,
  okText = '确定',
  cancelText = '取消',
  footerCancelHidden = false,
  footerOkHidden = false,
  footerCancelDisabled = false,
  footerAllCancelHidden = true,
  footerOkDisabled = false,
  confirmLoading = false,
  cancelLoading = false,
  title,
  maskClosable = false,
  headerHeight,
  footerHeight,
  footer,
  line = false,
  isImporting = false,
  importingInfo,
  ...props
}: Props) => {
  const [progress, setProgress] = useState(0);

  // 自动计算进度的效果
  useEffect(() => {
    if (isImporting) {
      setProgress(0);
      const duration = 30000; // 30秒
      const interval = 300; // 每300ms更新一次
      const increment = (interval / duration) * 100;

      const timer = setInterval(() => {
        setProgress(prev => {
          if (prev >= 99) {
            return 99;
          }
          return prev + increment;
        });
      }, interval);

      return () => clearInterval(timer);
    } else {
      // 当导入完成时，进度条显示100%
      setProgress(100);
    }
  }, [isImporting]);

  const Footer = () => {
    if (footer === null) {
      return <></>;
    }

    if (footer !== null && footer !== undefined) {
      return footer;
    }

    return (
      <ModalsFooter
        okText={okText}
        cancelText={cancelText}
        footerCancelHidden={footerCancelHidden}
        footerOkHidden={footerOkHidden}
        footerCancelDisabled={footerCancelDisabled}
        footerOkDisabled={footerOkDisabled}
        confirmLoading={confirmLoading}
        cancelLoading={cancelLoading}
        footerAllCancelHidden={footerAllCancelHidden}
        onOk={onOk}
        onCancel={onCancel}
        onAllCancel={onAllCancel}
        line={line}
      />
    );
  };

  return (
    <Modal
      {...props}
      title={title}
      footer={Footer}
      onCancel={onCancel}
      centered
      maskClosable={maskClosable}
      classNames={{
        content: '!p-0',
        header: '!p-[16px] !m-0 ',
        body: '!px-[46px] overflow-auto !h-[200px]',
        footer: '!m-0',
      }}
      styles={{
        body: {
          maxHeight: `calc(100vh - ${headerHeight ? headerHeight : '56px'} - 48px - ${footerHeight ? footerHeight : '56px'
            })`,
        },
      }}
    >
      {isImporting ? (
        <div className="text-[#4E5969] flex flex-col items-center justify-center h-full">
          <div>接口解析中，请稍等...</div>
          <Progress percent={progress} />
        </div>
      ) : (
        importingInfo?.fail == 0 ? (
          <div className='flex flex-col items-center justify-center h-full gap-4'>
            <div>
              <SvgIcon icon="tz-SUCCESS" size={40} color='#52C41A' />
            </div>
            <div className='text-[#101828] text-center flex flex-col items-center justify-center gap-3'>
              <div className='font-semibold text-xl'>
                全部接入
              </div>
              <div>已成功接入<span className='text-success'>{importingInfo?.success}</span>个接口</div>
            </div>
            <Button type="primary" onClick={() => { onCancel && onCancel() }}>完成</Button>
          </div>
        ) : (
          importingInfo?.fail ? (
            <div className='flex flex-col items-center justify-center h-full gap-4'>
              <div>
                <SvgIcon icon="warning" size={40} color='#FF9226' />
              </div>
              <div className='text-[#101828] text-center flex flex-col items-center justify-center gap-3'>
                <div className='font-semibold text-xl'>
                  部分接入
                </div>
                <div className='text-sm font-normal'>本次共计接入<span className='text-success'>{importingInfo?.success}</span>个接口，失败<span className='text-error'>{importingInfo?.fail}</span>个接口</div>
              </div>
              <div className='flex items-center gap-2'>
                <Button onClick={() => { onFailInfo && onFailInfo() }}>查看未接入详情</Button>
                <Button type="primary" onClick={() => { onCancel && onCancel() }}>完成</Button>
              </div>
            </div>
          ) : (
            <div className='flex flex-col items-center justify-center h-full gap-4'>
              <div>
                <SvgIcon icon="tz-FAILURE" size={40} color='#FC5151' />
              </div>
              <div className='text-[#101828] text-center flex flex-col items-center justify-center gap-3'>
                <div className='font-semibold text-xl'>
                  接入失败
                </div>
                <div className='text-sm font-normal'>连接超时</div>
              </div>
              <div className='flex items-center gap-2'>
                <Button onClick={() => { onReset && onReset() }}>重试</Button>
                <Button type="primary" onClick={() => { onCancel && onCancel() }}>完成</Button>
              </div>
            </div>
          )
        )
      )}
      {/* <div className="text-[#4E5969]">{children}</div> */}
    </Modal>
  );
};

export default TipsModals;
